<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>管理后台</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/config.js" type="application/javascript"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div style="padding: 15px; background: #F0F0F0;">
			<div class="layui-card" style="height: 120px;">
				<div style="background: #F0F0F0">
					<div class="layui-card-body" style="padding-top: 10px; height:100px">
						<div style="width: 33%; border-right: dashed 1px #F0F0F0; background: #FFFFFF; margin-left: -15px; height: 100px; float: left;">
							<div style="padding: 10px;">执行失败用例</div>
							<div id="failtestcase" style="font-weight: 800; line-height: 40px; font-size: 40px; text-align: center; color: #009688;"></div>
						</div>
						<div style="width: 33%; background: #FFFFFF; border-right: dashed 1px #F0F0F0; height: 100px; float: left;">
							<div style="padding: 10px;">用例总数</div>
							<div id="casenum" style="font-weight: 800; line-height: 40px; font-size: 40px; text-align: center; color: #009688;"></div>
						</div>
						<div style="width: 35%; background: #FFFFFF; height: 100px; float: left; ">
							<div style="padding: 10px;">执行通过率</div>
							<div id="tongguolv" style="font-weight: 800; line-height: 40px; font-size: 40px; text-align: center; color: #009688;"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-card" style="width: 98%;">
				<div style="padding: 10px;">用例个数趋势图</div>
				<div class="layui-card-body" style="padding: 20px;">
					<div id="main" style="width: 100%; background: #FFFFFF; height: 250px; margin-left: 10px;"></div>
				</div>
			</div>

		</div>
		<script type="text/javascript">
			var datecount, count
			layui.use(['layer'], function() {
				var layer = layui.layer;
				
				
				$.ajax({
					url: base_url + '/tongji/all',
					contentType: 'application/json; charset=utf-8',
					type: 'get',
					data: '',
					dataType: 'json',
					async: false,
					success: function(result) {
						if (result.code = '0') {
							$("#failtestcase").append("<a href='#' onclick='failtestcase()'>"+result.data[0].count+"</a>");
							$("#casenum").append("<a href='#' onclick='testcase()'>"+result.data[1].count+"</a>");
							$("#tongguolv").append((result.data[2].count/result.data[1].count*100).toFixed(1)+"%");
						}
					}
				});
				

				$.ajax({
					url: base_url + '/tongji/casecount/30',
					contentType: 'application/json; charset=utf-8',
					type: 'get',
					data: '',
					dataType: 'json',
					async: false,
					success: function(result) {
						if (result.code = '0') {
							var myChart = echarts.init(document.getElementById('main'));
							datecount = new Array();
							count = new Array();
							for (var p in result.data) { //遍历json数组时，这么写p为索引，0,1
								datecount[p] = result.data[p].date;
								count[p] = result.data[p].count;
							}
							option = {
								xAxis: {
									type: 'category',
									boundaryGap: false,
									data: datecount.reverse()
								},
								title: {
									left: 'center'
								},
								yAxis: {
									type: 'value'
								},
								series: [{
									data: count.reverse(),
									type: 'line',

									itemStyle: {
										normal: {
											lineStyle: {
												color: '#75cb75'
											},
											areaStyle: {
												color: '#75cb75'
											}
										}
									},
								}]
							};
							myChart.setOption(option);
						}
					}
				});
			});
		</script>
		<script type="text/javascript">
			function failtestcase() {
				var ss = parent.layer.open({
						type: 2,
						title: '执行失败的用例',
						area: ['1000px', '400px'],
						maxmin: true,
						content: ['failtestcaselist.html', 'yes']
					});
			}	
			function testcase() {
				var ss = parent.layer.open({
						type: 2,
						title: '用例列表',
						area: ['1000px', '400px'],
						maxmin: true,
						content: ['testcaselist.html', 'yes']
					});
			}	
		</script>
	</body>

</html>
